<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/5-2022-10-24-lidare.css">
</head>

<body>
    <div class="allIn"></div>
    <div class="shoppingCart">0</div>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <script src="./data/5-2022-10-24-lidare.js"></script>
    <script>
        jQuery(function () {
            var interceptIcon = false;
            var shopList = [];
            var isShow = false;
            var intercept = false;
            product = product.concat(product);
            jQuery('body').prepend(jQuery(`<div class="all"></div>`));
            // jQuery("body")[0].getBoundingClientRect();获取可视化坐标
            product.forEach(function (item) {
                jQuery(".all").append(jQuery(`
                    <div class="item">
                        <div class="item-img">
                            <img class="imgCont" src="${item.img}" alt="">
                        </div>
                        <div class="item-title">${item.title}</div>
                        <div class="item-footer">
                            <div class="price"">￥${item.price}</div>
                            ${shoucangSvg}
                        </div>
                    </div>
                `));
            });
            var svgs = jQuery("svg");
            for (var i = 0; i < svgs.length; i++) {
                jQuery(svgs[i]).click(function (e) {
                    if (intercept) return;
                    intercept = true;
                    var scrollTop = document.documentElement.scrollTop;
                    var item = jQuery(this).parents(".item");
                    var itemClone = item.clone();
                    itemClone.find(".item-footer").html(`
                        <div class="price"">${item.find(".price").text()}</div>
                        ${deleteSvg}
                    `);
                    shopList.push(itemClone);
                    var position = jQuery(this).parents(".item").position();
                    var img = item.find(".imgCont")[0];
                    var imgClone = jQuery(img).clone();
                    var shoppingCart = jQuery(".shoppingCart");
                    imgClone.css({
                        position: "fixed",
                        zIndex: 6000,
                        left: item.position().left + 35,
                        top: item.position().top - scrollTop + 21,
                        width: 120,
                        height: 120,
                        animation: "imgContIn 0.3s linear forwards"
                    });
                    jQuery(img).after(imgClone);
                    setTimeout(function () {
                        imgClone.css({
                            left: "calc(100vw - 110px)",
                            top: "calc(50vh - 60px)",
                            animation: "imgContOut 0.5s linear forwards"
                        });
                        setTimeout(function () {
                            var cat = parseInt(shoppingCart.text()) + 1;
                            if (cat >= 100) cat = "99+";
                            shoppingCart.text(cat);
                            imgClone.remove();
                            intercept = false;
                        }, 500)
                    }, 300)
                })
            }
            jQuery(".shoppingCart").click(function () {
                document.documentElement.scrollTop = 0;
                isShow = !isShow;
                if (isShow) {
                    jQuery(".allIn").css({
                        display: "flex",
                        opacity: 0,
                        animation: "allIn 0.5s linear forwards",
                        width: jQuery("body").width() - 89 + "px",
                        height: jQuery(".all").height() + 20 + "px"
                    });
                } else {
                    jQuery(".allIn").css({
                        opacity: 1,
                        animation: "allOff 0.5s linear forwards",
                    });
                    setTimeout(function () {
                        jQuery(".allIn").css({
                            display: "none"
                        });
                    }, 500);
                    return;
                }
                for(var index = 0;index<shopList.length;index++){
                    var item = shopList[index];
                    jQuery(".allIn").append(item);
                    item.find(".icon").click(function () {
                        if (interceptIcon) return;
                        interceptIcon = true;
                        var self = jQuery(this).parents(".item");
                        self.css({
                            opacity: 0,
                        });
                        setTimeout(function () {
                            self.remove();
                            jQuery(".shoppingCart").text(jQuery(".allIn").find(".item").length);
                            interceptIcon = false;
                            shopList = jQuery(".allIn").find(".item");
                        }, 500)
                    })
                }
            });
        });
    </script>
</body>

</html>